import { Button, Card, Form, Select, Table, Tag } from "antd";
import React, { useEffect, useState } from "react";
import { PlusOutlined } from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import { useSelector, useDispatch } from "react-redux";
import {
  getCategory1List,
  getCategory2List,
  getCategory3List,
  saveCategory1,
  saveCategory2,
  saveCategory3,
  setCategory1Id,
  setCategory1Name,
  setCategory2Id,
  setCategory2Name,
  setCategory3Id,
  setCategory3Name,
} from "@/app/category";

import "./index.css";
import type { category1, category2, category3 } from "@/api/product/attr/model";
import { useForm } from "antd/lib/form/Form";

/* //#region table表格
interface DataType {
  index: string | number;
  name: string;
  tags: string[];
  operate: string[];
} */

/* const columns: ColumnsType<DataType> = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
  },
  {
    title: "属性名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "商品名称列表",
    key: "operate",
    dataIndex: "operate",
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: "操作",
    key: "tags",
    dataIndex: "tags",
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
]; */

/* const data: DataType[] = [
  {
    index: "1",
    name: "手机",
    tags: ["型号", "电池"],
    operate: ["编辑", "删除"],
  },
  {
    index: "2",
    name: "手机",
    tags: ["型号", "电池"],
    operate: ["编辑", "删除"],
  },
  {
    index: "3",
    name: "手机",
    tags: ["型号", "电池"],
    operate: ["编辑", "删除"],
  },
]; */

/* const AttrsTable: React.FC = () => (
  <Table columns={columns} dataSource={data} />
); */

//#endregion

export default function Attr() {
  //获取三级类型数据
  const category1 = useSelector((state: any) => state.category.category1List);
  const category2 = useSelector((state: any) => state.category.category2List);
  const category3 = useSelector((state: any) => state.category.category3List);
  const [form]=useForm()
  //获取dispatch方法
  let dispatch = useDispatch();

  //#region  级联选择器
  //获取一级分类数据
  const getCategory1Data = () => {
    dispatch(saveCategory1([]))
   
    dispatch(getCategory1List());
  };
  

  //获取二级分类数据
  const getCategory2 = (val: number, option: any) => {
    dispatch(saveCategory2([]))
    dispatch(saveCategory3([]))
    dispatch(setCategory1Id(val))
    dispatch(setCategory1Name(option.label))
    form.setFieldsValue({
      category2:'',
      category3:''
    })
    
    dispatch(getCategory2List(val));

  };

  //获取三级分类
  const getCategory3 = (val: number, option: any) => {
    dispatch(saveCategory3([]))
    dispatch(setCategory2Id(val))
    dispatch(setCategory2Name(option.label))
    form.setFieldsValue({
      category3:''
    })
    dispatch(getCategory3List(val));
    
  };
  //#endregion
  useEffect(() => {
    getCategory1Data();
  }, []);
  return (
    <>
      <div className="packet">
        <Card className="cardAttr">
          <Form form={form} className="">
            <Form.Item name='category1'  label="一级分类:">
            
            <Select
              onChange={getCategory2}
              placeholder="请选择一级类别"
              style={{ width: 180 }}
              options={category1.map((item: any) => ({
                label: item.name,
                value: item.id,
              }))}
              allowClear={true}
              
            />
            </Form.Item>
            <Form.Item name='category2' label="二级分类:">
            
            <Select
              onChange={getCategory3}
              // disabled={c1}
              placeholder="请选择二级类别"
              style={{ width: 180 }}
              options={category2.map((item: any) => ({
                label: item.name,
                value: item.id,
              }))}
              allowClear={true}
            />
            </Form.Item>
            <Form.Item name='category3'  label="三级分类:">
            
            <Select
              placeholder="请选择三级类别"
              // disabled={c2}
              style={{ width: 180 }}
              options={category3.map((item: any) => ({
                label: item.name,
                value: item.id,
              }))}
              allowClear={true}
            />
            </Form.Item>
          </Form>
        </Card>
        {/* <Card className="cardTable">
          <Button type="primary" icon={<PlusOutlined />} className="addbtn">
            添加
          </Button>

          // {/* <AttrsTable />
        </Card> */}
      </div>
    </>
  );
}
